<template>
    <div class="flex flex-row items-stretch">
        <Left
            class="w-1/6 border-r-solid border-r-[1px] border-r-[#DBDEE2]"
        />
        <Design class="w-4/6" />
        <right
            class="w-1/6 border-l-solid border-l-[1px] border-l-[#DBDEE2]"
            :current-el="currentEl"
        />
    </div>
</template>
<script setup>
import Left from './Left.vue';
import Design from './Design.vue';
import Right from './Right.vue';
import mittBus from '@/utils/mittbus';
const flowInfo = inject('flowInfo');
const currentEl = ref(null);
provide('currentEl', currentEl);
mittBus.on('el-click', (data) => {
    if (data) {
        const { el, type, sourceId, targetId } = data;
        if (type === 'node') {
            // 选中节点
            const id = el.id;
            currentEl.value = flowInfo.value.nodes.find(
                (item) => item.id === id,
            );
        } else {
            // 选中连线
            currentEl.value = flowInfo.value.lines.find(
                (item) =>
                    item.sourceId === sourceId &&
                    item.targetId === targetId,
            );
        }
        return;
    }
    currentEl.value = null;
});
onUnmounted(() => {
    mittBus.off('el-click');
});
</script>
<style scoped></style>
